import React, { useEffect, Fragment } from 'react';
import { connect } from 'umi';
import moment from 'moment';
import { QuickForm } from 'vv-frontend-components';
import { formatMessage } from 'umi';
import { Card, Col, Form, Row, Button, Empty, Spin } from 'antd';
import QueryPage from '@/components/QueryPage';
import PageRouter from '@/components/PageRouter/PageRouter';
import DateRange from '@/components/DateRange';
import Locale from '@/utils/locale';
import { withRoutePage } from '@/utils/enhanceUtils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import TreeSelectPro from '@/components/TreeSelectPro/TreeSelectPro';
import useTreeSelectData from '@/hooks/useTreeSelectData';
import { everyEmpty } from './utils';

// 内部组件-----
import Rank from './ProcessComponents/Rank';
import Position from './ProcessComponents/Position';
import InterviewType from './ProcessComponents/InterviewType';
import InterviewMode from './ProcessComponents/InterviewMode';
import PeopleSex from './ProcessComponents/PeopleSex';
import PeopleOld from './ProcessComponents/PeopleOld';
import PeopleEdu from './ProcessComponents/PeopleEdu';
import PeopleYear from './ProcessComponents/PeopleYear';
// 内部组件-----
import styles from './index.less';

const { locale } = new Locale('zzjgfx');
// const formatDate = date => {
//     if (date) return moment(date);
//     return moment()
//         .subtract(1, 'M')
//         .startOf('month');
// };

/**
 * 职位与人才库分析
 */
const Process = ({ dispatch, form, process, location, loading }) => {
    const { interviewType, interviewMode, position, rank, peopleOld, peopleEdu, peopleYear, peopleSex } = process;
    const [companyTreeData, companyTreeLoading] = useTreeSelectData('company');
    // 如果是别的页面带参数跳转
    const {
        query: { companyId, dateType, startTime, endTime, quarter }
    } = location;
    const user = localStorage.getItem('user');
    const localCompanyId = user ? JSON.parse(user).companyId : undefined;
    const formatStartDate = date => {
        if (date) return moment(date);
        return moment()
            .subtract(1, 'M')
            .startOf('month');
    };

    const formatEndDate = date => {
        if (date) return moment(date);
        return moment()
            .subtract(1, 'M')
            .endOf('month');
    };

    console.log(companyTreeData, 'companyTreeDatacompanyTreeDatacompanyTreeData');

    const config = [
        {
            field: 'companyId',
            label: '选择公司：',
            config: {
                initialValue: companyId || localCompanyId
            },
            component: (
                <TreeSelectPro
                    showSearch
                    treeDefaultExpandAll
                    loading={companyTreeLoading}
                    treeData={companyTreeData}
                    placeholder="请选择所属公司"
                    style={{ minWidth: 200 }}
                    allowClear={false}
                    showArrow
                />
            )
        },
        {
            field: 'date',
            config: {
                initialValue: {
                    range: [formatStartDate(startTime), formatEndDate(endTime)],
                    type: typeof dateType === 'undefined' ? 'month' : dateType,
                    quarter: quarter ? Number(quarter) : 1
                }
            },
            component: <DateRange allowClear={false} />
        },
        {
            component: (
                <div>
                    <Button type="primary" htmlType="submit">
                        {locale('form.search', false)}
                    </Button>
                </div>
            )
        }
    ];
    const layout = { xs: 24, sm: 24, md: 24, lg: 12 };

    // 表单搜索
    const handleSubmit = () => {
        form.validateFields(async (err, values) => {
            const { date = { range: [] } } = values;
            if (err) return;
            dispatch({
                type: 'process/getProcess',
                payload: {
                    companyId: values.companyId,
                    startTime: date.range && date.range[0] ? moment(date.range[0]).format('YYYY-MM-DD') : '',
                    endTime: date.range && date.range[1] ? moment(date.range[1]).format('YYYY-MM-DD') : ''
                }
            });
        });
    };
    // Card title自定义样式属性
    const headStyle = {
        fontSize: '16px',
        lineHeight: '22px'
    };
    useEffect(() => {
        handleSubmit();
        return () => {
            dispatch({
                type: 'process/clear'
            });
        };
    }, []);
    const { pathname } = location;
    const tabType = pathname.includes('office') ? 'recruit' : 'recruitStat';
    return (
        <PageHeaderWrapper>
            <PageRouter type={tabType}>
                <QueryPage
                    style={{ overflow: 'hidden' }}
                    className={styles.queryWn}
                    background="transparent"
                    form={
                        <Form
                            layout="inline"
                            onSubmit={e => {
                                e.preventDefault();
                                handleSubmit();
                            }}
                        >
                            <Card bordered={false} title="职位与人才库分析" headStyle={headStyle}>
                                <QuickForm form={form} config={config} />
                            </Card>
                        </Form>
                    }
                />
                <div className={styles.slideDiv}>
                    <Spin spinning={loading.effects['process/getProcess']}>
                        <Fragment>
                            <Row gutter={24}>
                                <Col className="gutter-row" {...layout}>
                                    <Card title="招聘需求职位分析" bordered={false}>
                                        {!everyEmpty(position) ? (
                                            <Position data={position} />
                                        ) : (
                                            <Empty
                                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                                description={formatMessage({
                                                    id: 'stat.name.zwsj'
                                                })}
                                            />
                                        )}
                                    </Card>
                                </Col>
                                <Col className="gutter-row" {...layout}>
                                    <Card title="招聘需求-职级分析" bordered={false}>
                                        {Object.keys(rank).length > 0 ? (
                                            <Rank data={rank} />
                                        ) : (
                                            <Empty
                                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                                description={formatMessage({
                                                    id: 'stat.name.zwsj'
                                                })}
                                            />
                                        )}
                                    </Card>
                                </Col>
                            </Row>
                            <Row gutter={24}>
                                <Col className="gutter-row" {...layout}>
                                    <Card title="面试类型分析" bordered={false}>
                                        {!everyEmpty(interviewType) ? (
                                            <InterviewType data={interviewType} />
                                        ) : (
                                            <Empty
                                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                                description={formatMessage({
                                                    id: 'stat.name.zwsj'
                                                })}
                                            />
                                        )}
                                    </Card>
                                </Col>
                                <Col className="gutter-row" {...layout}>
                                    <Card title="面试方式分析" bordered={false}>
                                        {!everyEmpty(interviewMode) ? (
                                            <InterviewMode data={interviewMode} />
                                        ) : (
                                            <Empty
                                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                                description={formatMessage({
                                                    id: 'stat.name.zwsj'
                                                })}
                                            />
                                        )}
                                    </Card>
                                </Col>
                            </Row>
                            <Row gutter={24} type="flex">
                                <Col className="gutter-row" {...layout}>
                                    <Card title="人才性别分析" bordered={false}>
                                        {!everyEmpty(peopleSex) ? (
                                            <PeopleSex data={peopleSex} />
                                        ) : (
                                            <Empty
                                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                                description={formatMessage({
                                                    id: 'stat.name.zwsj'
                                                })}
                                            />
                                        )}
                                    </Card>
                                </Col>
                                <Col className="gutter-row" {...layout}>
                                    <Card title="人才年龄分析" bordered={false}>
                                        {!everyEmpty(peopleOld) ? (
                                            <PeopleOld data={peopleOld} />
                                        ) : (
                                            <Empty
                                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                                description={formatMessage({
                                                    id: 'stat.name.zwsj'
                                                })}
                                            />
                                        )}
                                    </Card>
                                </Col>
                                <Col className="gutter-row" {...layout}>
                                    <Card title="学历分析" bordered={false}>
                                        {!everyEmpty(peopleEdu) ? (
                                            <PeopleEdu data={peopleEdu} />
                                        ) : (
                                            <Empty
                                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                                description={formatMessage({
                                                    id: 'stat.name.zwsj'
                                                })}
                                            />
                                        )}
                                    </Card>
                                </Col>
                                <Col className="gutter-row" {...layout}>
                                    <Card title="工龄分析" bordered={false}>
                                        {!everyEmpty(peopleYear) ? (
                                            <PeopleYear data={peopleYear} />
                                        ) : (
                                            <Empty
                                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                                description={formatMessage({
                                                    id: 'stat.name.zwsj'
                                                })}
                                            />
                                        )}
                                    </Card>
                                </Col>
                            </Row>
                        </Fragment>
                    </Spin>
                </div>
            </PageRouter>
        </PageHeaderWrapper>
    );
};
export default withRoutePage(
    connect(({ process, loading }) => ({
        process,
        loading
    }))(Form.create()(Process))
);
